// 1. 值变量
@color: #999;
@bgColor: skyblue;
@width: 50%;
#wrap {
  color: @color;
  background: @bgColor;
  width: @width;
}

// 以 @ 开头 定义变量，并且使用时 直接 键入 @名称。

// 2. 选择器变量
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
  color: #999;
  width: 50%;
}
.@{Wrap}{
  color:#ccc;
}
#@{Wrap}{
  color:#666;
}


// 3. 属性变量
// 可减少代码书写量
@borderStyle: border-style;
@Soild:solid;
#wrap{
  @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

// 4. url 变量

// 项目结构改变时，修改其变量即可。

@images: "../img";//需要加引号
body {
  background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}


// https://juejin.cn/post/6844903520441729037